<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.is-selected {
  color: #1989FA;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.dashboard-editor-container > > > .el-card__body {
  padding: 20px 40px !important;
}
</style>
<style>
.hex-el-calendar .el-calendar-table .el-calendar-day {
  height: 40px;
  padding: 0px;
}

.block .el-range-editor--small.el-input__inner {
  width: 340px;
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <div>
        <el-col :span="8">
          <div>
            <el-card class="box-card hex-el-calendar" :body-style="{ padding: '0px' }" style="margin: 10px;">
              <div slot="header" class="clearfix">
                <span>日历</span>
              </div>
              <el-calendar>
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template slot="dateCell" slot-scope="{date, data}">
                  <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)" style="padding: 8px">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                      {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                    </p>
                  </div>
                </template>
              </el-calendar>
            </el-card>
          </div>
        </el-col>
        <el-col :span="16" style="padding-left: 20px">
          <div>
            <el-card class="box-card" :body-style="{ padding: '40px' }" style="margin: 10px;height: 165px">
              <div slot="header" class="clearfix">
                <el-row>
                  <div class="form-operator-button">
                    <span style="float: left">默认工作日设置</span>
                    <el-button type="primary" :loading="defaultLoadStatus" @click.native="defalutWorkCalendarSubmit"
                               size="mini" v-if="checkPermission(['workCalender:add'])"
                               align="center" style="float:right;padding: 3px 15px"><span
                      style="font-size: 8px !important;color: white !important;">保存</span></el-button>
                  </div>
                </el-row>
              </div>
              <div>
                <el-form ref="form" label-position="left" label-width="100px">
                  <el-row>
                    <el-form-item label="默认工作日">
                      <template>
                        <el-checkbox-group v-model="defaultWorkDates">
                          <el-checkbox label="1">周一</el-checkbox>
                          <el-checkbox label="2">周二</el-checkbox>
                          <el-checkbox label="3">周三</el-checkbox>
                          <el-checkbox label="4">周四</el-checkbox>
                          <el-checkbox label="5">周五</el-checkbox>
                          <el-checkbox label="6">周六</el-checkbox>
                          <el-checkbox label="7">周日</el-checkbox>
                        </el-checkbox-group>
                      </template>
                    </el-form-item>
                  </el-row>
                </el-form>
              </div>
            </el-card>
            <el-card class="box-card" :body-style="{ padding: '40px' }" style="margin: 10px;height: 275px">
              <div slot="header" class="clearfix">
                <el-row>
                  <div class="form-operator-button">
                    <span>自定义设置</span>
                    <el-button type="primary" v-if="checkPermission(['workCalender:add'])"
                               :loading="loadStatus" @click.native="toSubmit" size="mini"
                               align="center" style="float:right;padding: 3px 15px"><span
                      style="font-size: 8px !important;color: white !important;">保存</span></el-button>
                  </div>
                </el-row>
              </div>
              <div>
                <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="日期" prop="dateTime">
                        <el-input :disabled="true" v-model="form.dateTime"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <el-tooltip class="item" effect="dark" content="日期" placement="left">
                          <i class="el-icon-info hex-form-inf-icon" data-status="off"></i>
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="日期类型" prop="dateType">
                        <el-radio-group v-model="form.dateType">
                          <el-radio label="1">工作日</el-radio>
                          <el-radio label="0">休息日</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <el-tooltip class="item" effect="dark" content="日期类型" placement="left">
                          <i class="el-icon-info hex-form-inf-icon" data-status="off"></i>
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="描述" prop="dateDes">
                        <el-input placeholder="请输入内容" v-model="form.dateDes"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9" class="data_from_el-col">
                      <div class="hex-form-inf">
                        <el-tooltip class="item" effect="dark" content="请输入内容" placement="left">
                          <i class="el-icon-info hex-form-inf-icon" data-status="off"></i>
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="24">
          <div>
            <el-card class="box-card" :body-style="{ padding: '20px' }"
                     style="margin: 10px;">
              <div slot="header" class="clearfix">
                <span>自定义设置列表</span>
              </div>
              <!--工具栏-->
              <div class="head-container">
                <workOperation :permission="permission"/>
              </div>
              <!--表格渲染-->
              <div>
                <el-table ref="table" :data="crud.data" style="width: 100%; min-height: 300px"
                          v-loading="crud.loading"
                          @select="crud.selectChange" @select-all="crud.selectAllChange"
                          @selection-change="crud.selectionChangeHandler"
                          @filter-change="crud.handleFilterChange"
                          :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border
                          stripe>
                  <el-table-column type="selection" width="55"/>
                  <el-table-column v-if="false" prop="pkId" label="序号"/>
                  <el-table-column v-if="columns.visible('dateTime')" prop="dateTime" label="日期"/>
                  <el-table-column v-if="columns.visible('dateType')" prop="dateType" label="类型"
                                   :filters="[{ text: '工作日', value: '1' }, { text: '休息日', value: '0' }]"
                                   :formatter="dateTypeFormatter" min-width="50"
                                   filter-placement="bottom-end" :filter-multiple="false" key="dateType"
                                   column-key="dateType"
                  />
                  <el-table-column v-if="columns.visible('dateDes')" :show-overflow-tooltip="true" prop="dateDes"
                                   label="描述"/>
                </el-table>
              </div>
            </el-card>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import workDate from '@/api/workCalendar/workCalendar'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import workOperation from '@crud/extend/system/workCalendar/CRUD.operation'
import checkPermission from '@/utils/permission' // 权限判断函数

const queryList = [{'cloumValue': 'dateTime', 'cloumName': '日期'}]
//默认去查询

const defaultCrud = CRUD({
  title: '工作日历设置',
  url: 'api/workCalendar/selectPages',
  sort: 'sort,asc',
  queryList: queryList,
  crudMethod: {...workDate}
})

const defaultForm = {
  pkId: null,
  dateTime: null,
  dateType: null,
  dateDes: null
}
export default {
  name: "workCalender",
  components: {workOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['date_type'],
  filters: {
    formatTime: function (value) {
      if (value != '') {
        return moment(value).format("yyyy-MM-DD")
      }
    }
  },
  data() {
    var checkData = (rule, value, callback) => {
      if (rule.field === 'dateTime') {
        this.checkData(value, rule.field);
        setTimeout(() => {
          if (this.validCodeStatus) {
            callback();
          } else {
            callback(new Error("当前日期已存在"));
          }
        }, 1000);
      }
    }
    return {
      permission: {
        del: ['workCalender:del'],
        add: ['workCalender:add']
      },
      rules: {
        dateTime: [
          {required: true, message: '请选择日期', trigger: 'change'},
          {validator: checkData, trigger: 'change'}
        ],
        dateType: [
          {required: true, message: '请选择日期类型', trigger: 'change'},
        ],
      },
      pkId: '',
      dateType: "1",
      dateTime: '',
      dateDes: '',
      dateYear: '',
      defaultWorkDates: [],
      loadStatus: false,
      defaultLoadStatus: false,
      options: [{
        festival: '1',
        label: '元旦节'
      }, {
        festival: '2',
        label: '春节'
      }, {
        festival: '3',
        label: '清明节'
      }, {
        festival: '4',
        label: '劳动节'
      }, {
        festival: '5',
        label: '端午节'
      }, {
        festival: '6',
        label: '中秋节'
      }, {
        festival: '7',
        label: '国庆节'
      }],
      festival: '',
      dateTimes: [],
    }
  },
  computed: {},
  created() {
    this.getDefaultWorkCalendar()
  },
  methods: {
    checkPermission,
    // 判断日期是否重复
    checkData(value, field) {
      let param = {};
      //调用后台接口判断是否重复
      param[field] = value;
      param["pkId"] = this.form.pkId;
      workDate.checkData(param).then(res => {
        if ('dateTime' === field) {
          this.validCodeStatus = res;
        }
      })
    },
    getDefaultWorkCalendar() {
      workDate.getDefaultWorkCalendar().then(res => {
        this.defaultWorkDates = res
      })
    },
    dateTypeFormatter(row, column) {
      return this.dict.label.date_type[row.dateType]
    },
    calendarOnClick(e) {
      this.goEdit(e.day);
    },
    goEdit(dateTime) {
      workDate.goEdit(dateTime).then(res => {
        if (res.pkId == null) {
          this.form.pkId = null;
          this.form.dateType = null;
          this.form.dateDes = null;
          this.form.dateTime = dateTime;
        } else {
          this.form = res;
        }
      })
    },
    defalutWorkCalendarSubmit() {
      this.defaultLoadStatus = true;
      workDate.addDefaultWorkCalendar(this.defaultWorkDates).then(res => {
        this.defaultLoadStatus = false;
        if (res) {
          this.getDefaultWorkCalendar()
          this.$notify({title: '成功', message: '添加成功', type: 'success'});
        } else {
          this.$notify({title: '添加失败', message: '添加失败', type: 'warning'});
        }
      }).catch(() => {
        this.defaultLoadStatus = false;
      })
    },
    toSubmit() {
      let pkId = this.form.pkId;
      if (pkId != null && pkId != '') {
        this.edit();
      } else {
        this.add();
      }
    },
    add() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadStatus = true;
          workDate.add(this.form).then(res => {
            if (res) {
              this.loadStatus = false;
              this.crud.toQuery()
              this.$notify({title: '成功', message: '添加成功', type: 'success'});
            } else {
              this.$notify({title: '添加失败', message: '添加失败', type: 'warning'},
              );
            }
          }).catch(() => {
            this.loadStatus = false;
          })
        }
      })
    },
    edit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loadStatus = true;
          workDate.edit(this.form).then(res => {
            if (res) {
              this.loadStatus = false;
              this.crud.toQuery()
              this.$notify({title: '成功', message: '修改成功', type: 'success'});
            } else {
              this.$notify({title: '修改失败', message: '修改失败', type: 'warning'},
              );
            }
          }).catch(() => {
            this.loadStatus = false;
          })
        }
      })
    },
  }
}
</script>

